<template>
  <div class="Page_HomeStyleFrom">
    <div class="Page_HomeHeadPortrait">
      <p><img src="../../assets/a.png.png" alt="" /></p>
      <h1>管理后台</h1>
    </div>
    <div class="Page_HeadStyleAdd">
      <a-popover title="Title">
        <template #content>
          <p><a style="color:#000;" href="">新建文章-协调编辑器</a></p>
          <p><a style="color:#000;" href="/editor">新建文章</a></p>
          <p><a style="color:#000;" href="/editor">新建页面</a></p>
        </template>
        <a-button type="primary"><plus-outlined />新建</a-button>
      </a-popover>
    </div>
    <div class="Page_HeadRouteLink">
      <router-link class="Page_HeadRouteTitle" to="/home"
        ><dashboard-outlined />&nbsp;工作台</router-link
      >
    </div>
    <div class="Page_ContextFromNav">
      <a-button
        class="Page_ContextFromBtn"
        type="primary"
        style="marginLeft: 26px"
        @click="toggleCollapsed"
      >
        <MenuUnfoldOutlined v-if="collapsed" />
        <MenuFoldOutlined v-else />
      </a-button>

      <a-menu
        :openKeys="openKeys"
        :selectedKeys="selectedKeys"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
      >
        <a-sub-menu class="From_Article" key="sub1">
          <template #icon>
            <form-outlined />
          </template>
          <template #title>文章管理</template>
          <a-menu-item key="5"
            ><router-link to="/list">所有文章</router-link></a-menu-item
          >
          <a-menu-item key="6"
            ><router-link to="/classify">分类管理</router-link></a-menu-item
          >
          <a-menu-item key="7"
            ><router-link to="/label">标签管理</router-link></a-menu-item
          >
        </a-sub-menu>
        <a-menu-item key="1">
          <template #icon>
            <PieChartOutlined />
          </template>
          <span>页面管理<router-link to="/pagerou"></router-link></span>
        </a-menu-item>
        <a-menu-item key="2">
          <template #icon>
            <DesktopOutlined />
          </template>
          <span>知识小册<router-link to="/knowledge"></router-link></span>
        </a-menu-item>
        <a-menu-item key="3">
          <template #icon>
            <star-outlined />
          </template>
          <span>海报管理<router-link to="/poster"></router-link></span>
        </a-menu-item>
        <a-menu-item key="4">
          <template #icon>
            <message-outlined />
          </template>
          <span>评论管理<router-link to="/comment"></router-link></span>
        </a-menu-item>
        <a-menu-item key="5">
          <template #icon>
            <mail-outlined />
          </template>
          <span>邮箱管理<router-link to="/mailbox"></router-link></span>
        </a-menu-item>
        <a-menu-item key="6">
          <template #icon>
            <folder-open-outlined />
          </template>
          <span>文件管理<router-link to="/file"></router-link></span>
        </a-menu-item>
        <a-menu-item key="7">
          <template #icon>
            <search-outlined />
          </template>
          <span>搜索记录<router-link to="/search"></router-link></span>
        </a-menu-item>
        <a-menu-item key="8">
          <template #icon>
            <project-outlined />
          </template>
          <span>访问统计<router-link to="/visit"></router-link></span>
        </a-menu-item>
        <a-menu-item key="9">
          <template #icon>
            <user-outlined />
          </template>
          <span>用户管理<router-link to="/user"></router-link></span>
        </a-menu-item>
        <a-menu-item key="10">
          <template #icon>
            <setting-outlined />
          </template>
          <span>系统设置<router-link to="/system"></router-link></span>
        </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import {
  PlusOutlined,
  DashboardOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  MessageOutlined,
  FormOutlined,
  StarOutlined,
  FolderOpenOutlined,
  SearchOutlined,
  ProjectOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  components: {
    SettingOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    PlusOutlined,
    InboxOutlined,
    DashboardOutlined,
    AppstoreOutlined,
    FormOutlined,
    MessageOutlined,
    StarOutlined,
    FolderOpenOutlined,
    SearchOutlined,
    ProjectOutlined,
    UserOutlined,
  },

  setup() {
    const state = reactive({
      collapsed: false,
      selectedKeys: ["1"],
      openKeys: ["sub1"],
      preOpenKeys: ["sub1"],
    });
    watch(
      () => state.openKeys,
      (_val, oldVal) => {
        state.preOpenKeys = oldVal;
      }
    );

    const toggleCollapsed = () => {
      state.collapsed = !state.collapsed;
      state.openKeys = state.collapsed ? [] : state.preOpenKeys;
    };

    return {
      size: ref("large"),
      ...toRefs(state),
      toggleCollapsed,
    };
  },
});
</script>

<style>
.Page_HomeStyleFrom {
  width: 100%;
  height: 100%;
}
.Page_HomeHeadPortrait {
  width: 100%;
  height: 60px;
  margin-top: 20px;
  display: flex;
  align-content: center;
  justify-content: space-around;
}
.Page_HeadStyleAdd {
  width: 100%;
  height: 60px;
  margin-left: 50px;
  margin-top: 10px;
}

.Page_HomeHeadPortrait > h1 {
  font-weight: normal;
  color: #fff;
}
.Page_HomeHeadPortrait > p > img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.Page_HeadRouteLink {
  width: 100%;
  height: 30px;
  padding: 15px 50px;
  margin-top: 10px;
}
.Page_HeadRouteTitle {
  font-size: 15px;
  color: #0188fb;
}
.Page_ContextFromNav {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  margin-top: 10px;
}
.Page_ContextFromBtn {
  position: absolute;
  top: 10px;
  left: 200px;
}
.From_Article {
  width: 140px;
}
</style>